<template>
	<view class="container page-box">
		<view class="login-center pad-30">
			<view class="radius20 bg-white pad-30 font-34">
				<view class="centerXY columnY">
					<image class="security" src="/static/image/security.png"></image>
					<view class="font-36 mar-top-30 color-text bold">您正在修改登录密码</view>
					<!-- <view class="font-26 color-646464 mar-top-30">
						需要您的注册手机号 <text class="color-error">{{userInfo?.tel && maskPhoneNumber(userInfo?.tel)}}</text>
						短信验证
					</view> -->
				</view>
				<up-form labelPosition="top" :model="formData" :rules="rules" :borderBottom="false" ref="ruleFrom">
					<!-- 验证码 -->
					<!-- 	<up-form-item prop="sms_code">
						<view class="flex align-center">
							<up-input type="number" clearable shape="circle" placeholder="请输入验证码"
								v-model="formData.sms_code" :customStyle="{height: '88rpx',padding: '0 40rpx'}">
							</up-input>
							<view class="captcha">
								<text v-if="codeTime == 60" @click="hanldeCode" class="color-primary"
									:customStyle="{width: '300rpx'}">获取验证码</text>
								<text v-else type="primary" :plain="true" class="color-primary"
									:customStyle="{width: '300rpx'}">{{ codeText }}</text>
							</view>
						</view>
					</up-form-item> -->
					<!-- 新密码 -->
					<up-form-item prop="login_secret">
						<up-input clearable :type="newPassword ? 'text' :'password'" shape="circle" placeholder="请输入新密码"
							v-model="formData.login_secret" :customStyle="{height: '88rpx',padding: '0 40rpx'}">
							<template #suffix>
								<up-icon color="#888888" size="20" class="icon" @click="newPassword = !newPassword"
									:name="newPassword ? 'eye-fill' : 'eye-off'" />
							</template>
						</up-input>
					</up-form-item>
					<!-- 新密码 -->
					<up-form-item prop="login_secret_confirmation">
						<up-input clearable :type="showPassword ? 'text' :'password'" shape="circle"
							placeholder="请再次输入新密码" v-model="formData.login_secret_confirmation"
							:customStyle="{height: '88rpx',padding: '0 40rpx'}">
							<template #suffix>
								<up-icon color="#888888" size="20" class="icon" @click="showPassword = !showPassword"
									:name="showPassword ? 'eye-fill' : 'eye-off'" />
							</template>
						</up-input>
					</up-form-item>
				</up-form>
				<view class="mar-top-30">
					<up-button :disabled="isDisabled" :customStyle="customStyle" class="font-32 mar-top-10"
						shape="circle" @click="submit">确定</up-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { reactive, ref, computed } from 'vue'
	import { onShow, onLoad } from '@dcloudio/uni-app'
	import { updateLoginSecret, postSendCode } from '@/api/currency.js'
	import { getBaseInfo } from '@/api/index.js'
	import { dataReportFun } from '@/util/dataReport.js'
	
	onLoad(() => {
		dataReportFun({
			event: "client.page_view",
		})
	})

	const formData = reactive({
		sms_code: '',
		login_secret: '',
		login_secret_confirmation: ''
	})

	const customStyle = ref({
		background: "linear-gradient(270deg, #0055FE 0%, #5E94FF 100%)",
		color: "white",
		height: "100rpx"
	})

	const userInfo = ref(null)
	const ruleFrom = ref(null)
	// 表单校验规则
	const rules = ref({
		sms_code: [{
			required: true,
			message: '请输入验证码',
			trigger: 'blur'
		}],
		login_secret: [{
				required: true,
				message: '请输入新密码',
				trigger: 'blur'
			},
			{
				min: 6,
				message: '密码最少6位',
				trigger: 'blur'
			}
		],
		login_secret_confirmation: [{
				required: true,
				message: '请再次输入新密码',
				trigger: 'blur'
			},
			{
				validator: (rule, value, callback) => {

					return value === formData.login_secret
				},
				message: '两次输入密码不一致',
				trigger: ['blur']
			}
		]
	})

	const isDisabled = computed(() => {
		// if (!formData.sms_code) return true
		if (!formData.login_secret) return true
		if (!formData.login_secret_confirmation) return true
		return false
	})

	// 查看密码
	const showPassword = ref(false);
	const newPassword = ref(false);

	const maskPhoneNumber = (phoneNumber) => {
		// 去除手机号中的非数字字符
		phoneNumber = phoneNumber.replace(/\D/g, '')
		const handlePhone = phoneNumber.substring(0, 3) + '******' + phoneNumber.substring(phoneNumber.length -
			4)
		return handlePhone
	}

	const getUserInfo = () => {
		getBaseInfo().then(res => {
			userInfo.value = res.data.info;
		})
	}

	// 获取验证
	let codeTime = ref(60);
	let codeText = ref(`获取验证码`);
	let inter = ref(null);
	const hanldeCode = async () => {
		const res = await postSendCode({
			tel: userInfo.value.tel,
			scene: 1
		})

		clearInterval(inter.value);
		codeTime.value -= 1;
		codeText.value = `${codeTime.value}秒重新获取`;
		inter.value = setInterval(() => {
			codeTime.value -= 1
			codeText.value = `${codeTime.value}秒重新获取`;
			// 倒计时完成
			if (codeTime.value <= 0) {
				codeTime.value = `获取验证码`;
				codeTime.value = 60;
				clearInterval(inter.value);
			}
		}, 1000);
	}

	// 修改密码
	const submit = async () => {
		ruleFrom.value.validate().then(async valid => {
			if (valid) {
				const res = await updateLoginSecret(formData);
				if (res.code === 200) {
					uni.$u.toast('修改成功');

					uni.removeStorageSync('jwt_token');
					uni.removeStorageSync('refresh_token');
					uni.removeStorageSync('userId');

					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/login/login'
						})
					}, 1500)
				}
			}
		}).catch(error => {
			console.log('失败:', error);
		})
	}

	onShow(() => {
		getUserInfo()
	})
</script>

<style scoped>
	:deep(.u-form-item) {
		margin-top: 37rpx !important;
	}

	.security {
		display: block;
		width: 78rpx;
		height: 90rpx;
		margin-top: 33rpx;
	}

	.bold {
		font-weight: 500;
	}

	.captcha {
		width: 240rpx;
		height: 88rpx;
		background: rgba(0, 85, 254, 0.1);
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 20rpx;
	}
</style>